<template>
  <div class="w-full mx-auto px-5 relative overflow-hidden">
    <!-- 头部区域 -->
    <div class="relative z-1 py-6 text-center">
      <div class="animate-slide-in-down">
        <h1 class="text-5xl font-bold mb-5 tracking-tight">
          <span class="inline-block">🚀</span>
          开发者调试工具
        </h1>
        <p class="text-base text-gray-600 mx-auto opacity-90">帮助开发者更方便快捷的调试和开发怪兽模块，有任何疑问可以联系我们</p>
      </div>
    </div>

    <!-- 功能卡片区域 -->
    <div class="relative z-1 pb-15 max-w-1200px mx-auto">
      <div class="flex flex-wrap justify-center gap-6">
        <div
          v-for="(item, index) in menuItems"
          :key="index"
          class="mb-4 flex-0 flex-grow-0 w-[calc(33.333%-16px)] max-w-[calc(33.333%-16px)] min-w-300px"
          :style="{ animationDelay: index * 0.1 + 's' }"
        >
          <div
            class="relative bg-white/95 rounded-20px p-8 cursor-pointer transition-all duration-400 border border-white/20 backdrop-blur-10px shadow-lg overflow-hidden animate-fade-in-up hover:transform hover:-translate-y-2 hover:scale-102 hover:shadow-2xl"
            :class="{ 'opacity-70': item.comingSoon }"
            @click="handleCardClick(item)"
          >
            <!-- 顶部装饰条 -->
            <div
              class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[#165dff] to-[#722ed1] transform scale-x-0 transition-transform duration-300 hover:scale-x-100"
            ></div>

            <div class="text-center mb-5 transition-transform duration-300 hover:scale-110 hover:rotate-5">
              <dk-icon :icon="item.icon" :size="48" class="drop-shadow-md" />
            </div>
            <div class="text-center">
              <h3 class="text-1.4rem font-semibold text-gray-800 mb-3 transition-colors duration-300 hover:text-[#165dff]">
                {{ item.title }}
              </h3>
              <p class="text-0.95rem text-gray-500 leading-relaxed transition-colors duration-300 hover:text-gray-600">
                {{ item.description }}
              </p>
            </div>

            <!-- 悬停效果背景 -->
            <div
              class="absolute top-1/2 left-1/2 w-0 h-0 bg-gradient-radial from-[#165dff]/10 to-transparent rounded-full transform -translate-x-1/2 -translate-y-1/2 transition-all duration-600 -z-1 hover:w-300px hover:h-300px"
            ></div>

            <!-- 敬请期待标签 -->
            <div
              v-if="item.comingSoon"
              class="absolute top-3 right-3 bg-gradient-to-br from-pink-400 to-pink-300 text-white px-3 py-1 rounded-xl text-0.8rem font-medium shadow-lg"
            >
              敬请期待
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 背景装饰 -->
    <div
      class="absolute -top-1/2 -left-1/2 w-200% h-200% bg-gradient-radial from-[#165dff]/5 to-transparent animate-float pointer-events-none -z-1"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

defineOptions({
  name: 'Home'
})

const router = useRouter()

// 菜单项配置
const menuItems = ref([
  {
    title: '应用管理',
    description: '安装、更新、发布和管理应用插件',
    icon: 'mdi:package-variant',
    route: '/addons',
    color: '#165dff'
  },
  {
    title: '调试记录',
    description: '使用全局函数debug调试系统功能',
    icon: 'mdi:cpu-64-bit',
    route: '/debug',
    color: '#165dff'
  },
  {
    title: '事件列表',
    description: '管理应用事件，监听事件和触发事件',
    icon: 'mdi:truck',
    route: '/event',
    color: '#165dff'
  },
  {
    title: '错误日志',
    description: '记录系统错误和异常信息',
    icon: 'mdi:file-document-remove',
    route: '/exception',
    color: '#165dff'
  },

  {
    title: 'AI代码生成',
    description: '使用AI构建CRUD，快速生成代码和表单',
    icon: 'mdi:magic-staff',
    route: '/addons?crud=1',
    color: '#165dff'
  },
  {
    title: 'Swoole加密',
    description: '采用最先进的加密算法保护项目源码安全',
    icon: 'mdi:lock',
    url: 'https://www.dkyx.cc/developer/encryption',
    comingSoon: false,
    color: '#165dff'
  },
  {
    title: 'DIY创建',
    description: '可视化创建自定义组件',
    icon: 'mdi:cellphone',
    route: '/diy',
    color: '#165dff'
  },
  {
    title: '文档中心',
    description: '查看开发文档和API说明',
    icon: 'mdi:file-document',
    url: 'http://doc.dkyx.cc/vue3',
    color: '#165dff'
  },
  {
    title: '访问官网',
    description: '了解更多产品信息',
    icon: 'mdi:web',
    url: 'http://www.dkyx.cc',
    color: '#165dff'
  }
])

// 处理卡片点击
const handleCardClick = (item: any) => {
  if (item.comingSoon) {
    ElMessage.info('功能开发中，敬请期待 🚀')
    return
  }

  if (item.url) {
    toUrl(item.url)
  } else if (item.route) {
    router.push(item.route)
  }
}

const toUrl = (url: string) => {
  ElMessageBox.confirm('即将跳转到外部网站，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      window.open(url, '_blank')
    })
    .catch(() => {})
}
</script>

<style scoped>
/* 自定义动画 */
@keyframes slide-in-down {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30px, -30px) rotate(120deg);
  }
  66% {
    transform: translate(-20px, 20px) rotate(240deg);
  }
}

/* 自定义类 */
.animate-slide-in-down {
  animation: slide-in-down 0.8s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out both;
}

.animate-float {
  animation: float 20s ease-in-out infinite;
}
</style>
